<template>
  <div class="auth-resource">
    <el-form label-width="120px"
             :model="formModel"
             :rules="formRules"
             label-position="left"
             ref="formRef">
    <el-row justify="center"
              v-model="modelValue"
      >
        <el-col :span="20">
            <div class="sub-title">品类信息</div>
            <div class="form-1">
              <el-row>
                <el-col :span="8" class="clearance">
                  <el-form-item label="行业/品类" prop="categoryList" required>
                    <el-cascader
                        :disabled="!isEditable"
                        v-model="formModel.categoryList"
                        :options="categoryList"
                        :props="{ expandTrigger: 'hover', label: 'name', value: 'id', children: 'children'}"
                        class="two-level-cascader level-cascader"
                        @change="handleCascaderChange"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <div class="sub-title">产品信息</div>
            <div class="form-1">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="ProdID" prop="prodId" v-if="formModel.status === '2'">
                    <el-text>{{ formModel.prodId }}</el-text>
                    <el-button class="CancerBtnCopy" @click="handleCopy()">复制</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8" class="clearance">
                  <el-form-item label="产品名称中文" prop="name">
                    <el-input
                        v-model="formModel.name"
                        minlength="1"
                        maxlength="30"
                        placeholder="请输入产品名称（1～30字符）"
                        :disabled="!isEditable"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="产品名称英文" prop="nameEn">
                    <el-input
                        v-model="formModel.nameEn"
                        minlength="1"
                        :disabled="!isEditable"
                        maxlength="30"
                        placeholder="请输入产品名称（1～30字符）"
                    ></el-input>
                  </el-form-item
                  ></el-col>
              </el-row>
              <el-row>
                <el-col :span="8" class="clearance">
                  <el-form-item label="品牌名称中文" prop="brand"
                  ><el-input
                      v-model="formModel.brand"
                      minlength="1"
                      maxlength="20"
                      placeholder="请输入品牌名称（1～20字符）"
                      :disabled="!isEditable"
                  ></el-input
                  ></el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="品牌名称英文" prop="brandEn"
                  ><el-input
                      v-model="formModel.brandEn"
                      minlength="1"
                      maxlength="30"
                      placeholder="请输入品牌英文（1～30字符）"
                      :disabled="!isEditable"
                  ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8" class="clearance">
                  <el-form-item label="产品型号" prop="model">
                    <el-input
                        v-model="formModel.model"
                        minlength="1"
                        maxlength="30"
                        placeholder="请输入产品型号（1～30字符）"
                        :disabled="!isEditable"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="OS系统版本" prop="osSystemVersion">
                    <el-input
                        v-model="formModel.osSystemVersion"
                        minlength="1"
                        maxlength="30"
                        placeholder="请输入OS系统版本"
                        :disabled="!isEditable"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8" class="clearance">
                  <el-form-item label="OS类型中文" prop="osType">
                    <el-select
                        v-model="formModel.osType"
                        placeholder="请选择OS类型"
                        @change="handleChange"
                        :disabled="!isEditable"
                    >
                      <el-option v-for="item in osType" :key="item.id" :label="item.label" :value="item.code">{{item.label}}</el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="OS类型英文" prop="osTypeEn" class="red-star">
                    <el-text>
                      {{ formModel.osTypeEn }}
                    </el-text>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="是否为桥设备" prop="bridgeEquipment">
                    <el-radio-group v-model="formModel.bridgeEquipment" :disabled="!isEditable">
                      <el-radio class="label-isBridgeDeviceNo" value="0">否</el-radio>
                      <el-radio class="label-isBridgeDeviceNo" value="1">是</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="48">
                  <el-form-item label="支持连接方式" prop="supportConnection">
                    <el-checkbox-group v-model="formModel.supportConnection" :disabled="!isEditable">
                      <el-checkbox
                          v-for="item in supportConnectionList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.value"
                          class="label-isBridgeDeviceNo"
                      >
                        {{ item.name }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="PIN码方式" prop="pinCodeMethod" >
                    <el-radio-group v-model="formModel.pinCodeMethod" :disabled="!isEditable">
                      <el-radio class="label-isBridgeDeviceNo" value="1">默认PIN码</el-radio>
                      <el-radio class="label-isBridgeDeviceNo" value="2">随机PIN码</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="支持认证类型" prop="supportAuthentication" >
                    <el-radio-group v-model="formModel.supportAuthentication" :disabled="!isEditable">
                      <el-radio class="label-isBridgeDeviceNo" value="1">无认证</el-radio>
                      <el-radio class="label-isBridgeDeviceNo" value="2">一品一密</el-radio>
                      <el-radio class="label-isBridgeDeviceNo" value="3" disabled>一机一密</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="是否支持靠近发现功能" prop="supportProximityDiscovery" class="my-label">
                    <el-radio-group v-model="formModel.supportProximityDiscovery" :disabled="!isEditable">
                      <el-radio class="label-isBridgeDeviceNo" value="0">否</el-radio>
                      <el-radio class="label-isBridgeDeviceNo" value="1" @change="isApproachingChange">是</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="拉起APP包名" prop="appPackageName" class="packageNameInput" v-if="formModel.supportProximityDiscovery === '1'">
                    <el-input
                        v-model="formModel.appPackageName"
                        minlength="1"
                        maxlength="30"
                        :disabled="!isEditable"
                        placeholder="ohos.xxxx.com"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="formModel.supportProximityDiscovery === '1'">
                <el-col :span="8" class="clearance">
                  <el-form-item label="deepLink" prop="deepLink">
                    <el-input
                        v-model="formModel.deepLink"
                        minlength="1"
                        placeholder="请添加deepLink"
                        :disabled="!isEditable"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="应用ID" prop="appIdentifier">
                    <el-input
                        v-model="formModel.appIdentifier"
                        minlength="1"
                        maxlength="30"
                        placeholder="请输入应用ID"
                        :disabled="!isEditable"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item class="red-star" label="上传产品图片" prop="imageBase64">
                    <el-upload
                        class="avatar-uploader"
                        :show-file-list="false"
                        :before-upload="beforeAvatarUpload"
                        accept=".png,.jpg"
                        :on-change="uploadFile"
                        :action="uploadAction"
                        style="margin-right: 20px"
                        :disabled="!isEditable"
                    >
                      <el-image
                          v-if="formModel.imageBase64"
                          :src="formModel.imageBase64"
                          class="avatar"
                          style="width: 120px; height: auto"
                          ref="imageRef"
                          show-progress
                          fit="cover"
                      />
                      <div class="img-center" v-else>
                        <div class="click-upload">请上传265*256的图片，图片大小不能超过2MB</div>
                      </div>
                    </el-upload>
                    <el-image-viewer
                        v-if="showPreview"
                        :url-list="previewList"
                        @close="showPreview = false"
                    />
                    <div style="margin-right: 50px">
                      <p><ElButton @click="deleteImage" :disabled="!deleteIma">删 除</ElButton></p>
                      <p><ElButton @click="showPreview = true" :disabled="!viewImg">查 看</ElButton></p>
                    </div>


                    <el-upload
                        class="avatar-uploader"
                        :show-file-list="false"
                        :before-upload="beforeUploadHeight"
                        accept=".png,.jpg"
                        :on-change="uploadFileHeight"
                        :action="uploadAction"
                        style="margin-right: 20px"
                        :disabled="!isEditable"
                    >
                      <el-image
                          v-if="formModel.highImageBase64"
                          :src="formModel.highImageBase64"
                          class="avatar"
                          style="width: 120px; height: auto"
                          ref="imageRef"
                          show-progress
                          fit="cover"
                      />
                      <div class="img-center" v-else>
                        <div class="click-upload">请上传400*400的图片，图片大小不能超过2MB</div>
                      </div>
                    </el-upload>
                    <el-image-viewer
                        v-if="showPreviewHeight"
                        :url-list="previewListHeight"
                        @close="showPreviewHeight = false"
                    />
                    <div>
                      <p><ElButton @click="deleteImageHeight" :disabled="!deleteImgHeight">删 除</ElButton></p>
                      <p><ElButton @click="showPreviewHeight = true" :disabled="!viewImgHeight">查 看</ElButton></p>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div v-if="formModel.status === '2'">
              <div class="sub-title">物模型信息</div>
              <div class="form-1">
                <el-row>
                  <el-col :span="12">
                    <el-button class="CancerBtnCopy" @click="fileDownload()">下载</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>

            <div class="dialog-footer">
              <div class="btn-footer">
                <el-button class="btnCancer"
                           @click="edit"
                           :disabled="formModel.status === '1' || formModel.status === '2'"
                           :type="['1', '2'].includes(formModel.status) ? 'info' : 'primary'"
                >{{ isEditable ? '保存' : '编辑' }}</el-button>
              </div>
            </div>
            <div class="sub-title">审核状态</div>
            <div class="content-detail">
              <el-scrollbar height="100px">
                <p v-for="item in ListExamine">{{ item }}</p>
              </el-scrollbar>
            </div>
            <div class="dialog-footer">
              <div class="btn-footer">
                <el-button class="btnCancer"
                           @click="submitBtn"
                           :type="formModel.status !== '2' ? 'primary' : 'info'"
                           :disabled="submitMine"
                >{{formModel.status === '1' ? '撤回' : '提交审核'}}</el-button>
              </div>
            </div>
        </el-col>
      </el-row>
    </el-form>
    </div>
</template>

<script lang="ts" setup>
import {ElMessage, ElMessageBox, UploadProps} from "element-plus";
import {
  productListDetailEdit,
  productListDetailSub,
  productListDetailWithdraw, productListExamineList, productListFile,
} from "@/service/dp";
import {computed, defineEmits} from "vue";
import {useRoute} from "vue-router";
import {productListDetail} from "@/service/dp.ts";
const route = useRoute();
const showPreview = ref(false)
const showPreviewHeight = ref(false)
const formRef: any = ref(null);

interface ProductDetail {
  appPackageName?: string,
  bridgeEquipment: string,
  categoryDictId: string,
  category: string,
  imageBase64: string,
  imageId: string,
  imageName: string,
  nameEn: string,
  osSystemVersion: string,
  osType: string,
  osTypeEn: string,
  status: string,
  submitTime: string,
  supportAuthentication: string,
  pinCodeMethod: string,
  supportConnection: string,
  supportProximityDiscovery: string,
  transMap: string,
  id: string,
  prodId: string,
  model: string,
  type: string,
  name: string,
  brand: string,
  brandEn: string,
  createTime: string,
  createUser: string,
  createUserName: string,
  updateTime: string,
  updateUser: string,
  updateUserName: string,
  categoryList: string[],
  proFileId: string,
  supportConnectionList: string[],
  highImageBase64: string,
  deepLink: string,
  appIdentifier: string
}

const categoryList = ref<any>();
const formModel: any = ref<ProductDetail>({
  appPackageName: "",
  bridgeEquipment: "",
  category: "",
  imageBase64: "",
  highImageBase64: "",
  imageName: "",
  nameEn: "",
  osSystemVersion: "",
  osType: "",
  osTypeEn: "",
  status: "0",
  supportAuthentication: "",
  pinCodeMethod:"",
  supportConnection: "",
  supportProximityDiscovery: "",
  id: "",
  prodId: "",
  model: "",
  type: "",
  name: "",
  brand: "",
  brandEn: "",
  proFileId: "",
  supportConnectionList: [], //支持连接方式
  categoryList: [],
  categoryDictId: "",
  imageId: "",
  submitTime: "",
  transMap: "",
  createTime: "",
  createUser: "",
  createUserName: "",
  updateTime: "",
  updateUser: "",
  updateUserName: "",
  deepLink: "",
  appIdentifier: ""
});

const param = ref({id : ''});
//连接方式
const supportConnectionList: any = ref([
  { id: 1, name: 'WI-FI', value: '1' },
  { id: 2, name: 'BLE', value: '2' },
  { id: 3, name: 'SLE', value: '3' },
  { id: 4, name: '以太网', value: '4' }
]);

const osType: any = ref([
  { code: '1', label: '轻量系统', value:'Mini System' },
  { code: '2', label: '小型系统', value:'Small System' },
  { code: '3', label: '标准系统', value:'Standard System' }
]);
const formRules: any = ref({
  name: [
    { required: true, message: "请输入产品名称中文" },
    { min: 1, max: 30, message: "长度在 1 到 30 个字符" },
  ],
  nameEn: [
    { required: true, message: "请输入产品名称英文" },
    { min: 1, max: 30, message: "长度在 1 到 30 个字符" },
    { 
      pattern: /^[^\u4e00-\u9fa5\uff01\uff1f\uff0c\u3002]*$/,
      trigger: "blur",
      message: "请输入英文字符",
    },
  ],
  model: [
    { required: true, message: "请输入产品型号" },
    { min: 1, max: 30, message: "长度在 1 到 30 个字符" },
  ],
  brand: [
    { required: true, message: "请输入品牌名称" },
    { min: 1, max: 20, message: "长度在 1 到 20 个字符" },
  ],
  brandEn: [
    { required: true, message: "请输入品牌英文（1～30字符）" },
    { min: 1, max: 30, message: "长度在 1 到 30 个字符" },
    { 
      pattern: /^[^\u4e00-\u9fa5\uff01\uff1f\uff0c\u3002]*$/,
      trigger: "blur",
      message: "请输入英文字符",
    },
  ],
  osSystemVersion: [
    { required: true, message: "请输入OS系统版本（1～30字符）" },
    { min: 1, max: 30, message: "长度在 1 到 30 个字符" },
  ],
  osType: [
    { required: true, message: "请选择OS系统版本" },
  ],
  bridgeEquipment: [
    { required: true,message: "请选择是否桥设备"}
  ],
  supportConnection: [
    { required: true,message: "请选择支持连接方式"}
  ],
  supportAuthentication: [
    { required: true,message: "请选择支持认证类型"}
  ],
  pinCodeMethod: [
    { required: true,message: "请选择PIN码方式"}
  ],
  supportProximityDiscovery: [
    { required: true,message: "请选择是否支持靠近发现功能"}
  ],
  appPackageName: [
    { required: true, message: "拉起包名不能为空" },
  ],
  categoryDictParentId: [
    { required: true, message: "请选择行业" },
  ],
  deepLink: [
    { required: true, message: "请添加deepLink" },
  ],
  appIdentifier: [
    { required: true, message: "请输入应用ID" },
  ],
});
const emit = defineEmits(["addSuccessDetail"]);
const modelValue: any = ref(false);
// 编辑状态
const isEditable = ref(false);
const previewList = computed(() =>  [formModel.value.imageBase64]);
const previewListHeight = computed(() =>  [formModel.value.highImageBase64]);
const deleteIma = ref(false);
const deleteImgHeight = ref(false);
const viewImg = ref(true);
const viewImgHeight = ref(true);
const ListExamine = ref([]);
const submitMine = ref(false);
const beforeUploadImg = ref(false);
const beforeUploadImgHeg = ref(false);

defineExpose({
  showDetail,
});

onMounted(() => {
  getCategoryList()
  param.value = { id: JSON.parse(JSON.stringify(route.query.id)) };
  getProductDetails();
  getProductDetailsExamineList();
});

const getProductDetails = async () => {
  try {
    const res: any = await productListDetail( param.value );
    if (res.code === 200) {
      formModel.value = res.data;
      formModel.value.supportConnection = formModel.value.supportConnection.split(",");
      if (formModel.value.status === '2'){
        submitMine.value = true;
      }
    } else {
    }
  } catch (error) {}
};

const getProductDetailsExamineList = async () => {
  try {
    const res: any = await productListExamineList(param.value);
    if (res.code === 200) {
      ListExamine.value = res.data;
    } else {
    }
  } catch (error) {}
};


// 产品列表树
const getCategoryList = async () => {
  try {
    const res: any = await MyService.product.getCategoryTree({ searchKey: ''});
    if (res.code === 200) {
      categoryList.value = res.data;
      categoryList.value  = categoryList.value.map((parent: { children: any[]; }) => ({
        ...parent,
        children: parent.children.map((child: any) => ({
          ...child,
          children: child.children.map((childEn: any) => ({
            ...childEn,
          }))
        }))
      }));
    }
  } catch (error) {}
};

function findNamesByIds(ids: any, options: any) {
  const names: any[] = []
  function recursiveFind(currentIds: string | any[], currentOptions: any) {
    for (const item of currentOptions) {
      if (currentIds.includes(item.id)) {
        names.push(item.name)
        if (item.children && item.children.length > 0 && currentIds.length > 1) {
          recursiveFind(currentIds.slice(1), item.children)
        }
        break
      } else if (item.children && item.children.length > 0) {
        recursiveFind(currentIds, item.children)
      }
    }
  }
  recursiveFind(ids, options)
  return names
}

function handleCascaderChange(checkedIds: any) {
  const name = findNamesByIds(checkedIds, categoryList.value);
  formModel.value.type = name[2];
}


// 编辑和保存
const edit = () => {
  if (isEditable.value) {
    // 保存逻辑
    confirmEdit();
  }else {
    deleteIma.value = true;
    deleteImgHeight.value = true;
    isEditable.value = true;
  }
};

//保存
const confirmEdit = () => {
  if (beforeUploadImg.value == true) {
    ElMessage.error("请上传256px*256px的图片");
    return;
  } else if (beforeUploadImgHeg.value == true){
    ElMessage.error("请上传400px*400px的图片");
    return;
  } else {
    formRef.value.validate(async (valid: any) => {
      if (valid) {
        let res: any = await productListDetailEdit({
          ...formModel.value,
          supportConnection: formModel.value.supportConnection.join(","),
          categoryDictId: formModel.value.categoryList[2],
          categoryDictParentId: formModel.value.categoryList[1],
        });
        if (res.code === 200) {
          ElMessage.success("保存成功");
          isEditable.value = false;
          deleteIma.value = false;
          deleteImgHeight.value = false;
        } else {
          ElMessage.error(res.msg);
        }
      } else {
      }
    });
  }

}

const submitBtn = async () => {
  try {
    if(isEditable.value) {
      await ElMessageBox.confirm('请先保存，再提交审核', '操作提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      });
      return;
    }
    if (formModel.value.status === '0' || formModel.value.status === '3') {
      const res: any = await productListDetailSub(param.value);
      if (res.code === 200) {
        ElMessage.success("提交成功")
        formModel.value.status = '1';
        deleteIma.value = false;
        deleteImgHeight.value = false;
        viewImg.value = false
        viewImgHeight.value = false
        getProductDetailsExamineList();
      } else {
        ElMessage.error(res.msg);
      }
    } else if (formModel.value.status === '1') {
      const res: any = await productListDetailWithdraw(param.value);
      if (res.code === 200) {
        ElMessage.success("撤回成功");
        getProductDetailsExamineList();
        formModel.value.status = '0';
      } else {
        ElMessage.error(res.msg);
      }
    }

  } catch (error) {}
};

// 显示
function showDetail() {
  modelValue.value = true;
}

// 是否靠近支持发现功能
const isApproachingChange = (value: any) => {
  const supportConnection = formModel.value.supportConnection.includes('2');
  if (value === "1" && !supportConnection){
    ElMessage.error("支持连接类型未选择BLE");
    formModel.value.supportProximityDiscovery = "0"
    return;
  } else if(value === "1" && supportConnection) {
    ElMessage.warning("蓝牙靠近发现为限制功能，请与管理员沟通后再选择");
  }
};

// 复制
function handleCopy() {
  const textarea = document.createElement('textarea');
  textarea.value = formModel.value.prodId;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
  ElMessage.success("已复制到剪切板");
}

const handleChange = (value: any) => {
  if (value === '1') {
    formModel.value.osTypeEn = 'Mini System';
  } else if (value === '2') {
    formModel.value.osTypeEn = 'Small System';
  } else {
    formModel.value.osTypeEn = 'Standard System';
  }
};

//文件下载
const fileDownload = async () => {
  try {
    const res: any = await productListFile({ fileId: formModel.value.proFileId });
    if (res.code === 200) {
      if (formModel.value.proFileId === '' || formModel.value.proFileId === null) {
        ElMessage.error("文件不存在");
      } else {
        MyModule.utile.downloadFileByUrl(res.data);
        ElMessage.success("文件下载成功");
      }
    } else {
      ElMessage.error("文件不存在");
    }
  } catch (error) {}
};

const uploadAction = ref(
    import.meta.env.PROD ? `${import.meta.env.VITE_SERVER_ACCOUNT}/api/v1/business/biz/dp/product/geFileUploadIconId` : '/api/v1/business/biz/dp/product/geFileUploadIconId '
);

const uploadFile = async (uploadFile: any) => {
  let imgBase64: any = await MyModule.utile.imageFileToBase64(uploadFile.raw);
  formModel.value.imageBase64 = imgBase64;
};

// 上传之前
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      if (img.width === 256 && img.height === 256) {
        resolve(rawFile);
        beforeUploadImg.value = false;
      } else {
        ElMessage.error("请上传256px*256px的图片");
        beforeUploadImg.value = true;
        return false;
      }
      return;
    };
    img.src = URL.createObjectURL(rawFile);
  });
}


const uploadFileHeight = async (uploadFile: any) => {
  let highImageBase64: any = await MyModule.utile.imageFileToBase64(uploadFile.raw);
  formModel.value.highImageBase64 = highImageBase64;
};

// 上传之前-高清图
const beforeUploadHeight: UploadProps['beforeUpload'] = (rawFile) => {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      if (img.width === 400 && img.height === 400) {
        resolve(rawFile);
        beforeUploadImgHeg.value = false;
      } else {
        ElMessage.error("请上传400px*400px的图片");
        beforeUploadImgHeg.value = true;
        return false;
      }
      return;
    };
    img.src = URL.createObjectURL(rawFile);
  });
}

// 删除清空图片信息
const deleteImage = () => {
  if (formModel.value.imageBase64) {
    viewImg.value = false
    formModel.value.imageBase64 = null
  } else {
    ElMessage.error("没有可删除的图片");
  }
}

// 删除清空图片信息
const deleteImageHeight = () => {
  if (formModel.value.highImageBase64) {
    viewImgHeight.value = false
    formModel.value.highImageBase64 = null
  } else {
    ElMessage.error("没有可删除的图片");
  }
}

</script>

<style scoped lang="scss">
.red-star::before {
  content: "*";
  color: #f32b2b;
  margin-right: 4px;
}
.margin-left-16 {
  margin-left: 16px;
}
.auth-resource {
  // padding: 48px 195px 24px 197px;
  padding-top: 24px;
  background-color: #ffffff;
  .sub-title {
    margin-bottom: 24px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    line-height: 21px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    padding-left: 14px;
    height: 21px;
    border-left: 2px solid rgba(0, 0, 0, 0.9);
  }
  .form-1 {
    padding-left: 16px;
  }
  .company-cert {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.4);
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .el-row.is-justify-center{
    justify-content:start;
  }

  .upload-comp {
    display: flex;
  }

  .person-cert {
    display: flex;
    flex-direction: column;
    .cert-wrap {
      display: flex;
    }
    .tips {
      display: flex;
      align-items: center;
      max-width: 420px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.4);
      line-height: 16px;
      font-style: normal;
      text-transform: none;
    }
  }

  .cert-top {
    display: flex;
  }

  .cert-bottom {
    margin-top: 16px;
    display: flex;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    text-align: left;
    font-style: normal;
    text-transform: none;
    img {
      margin-top: 8px;
    }
  }
}
.CancerBtn{
  width:120px;
  margin-left: 20px;
}
.CancerBtnCopy{
  margin-left: 50px;
}
.CancerBtn-view{
  width:120px;
  margin-left: 20px;
}
.label-isBridgeDeviceNo {
  width: 150px;
}

.dialog-footer {
  width: 100%;

  .btn-footer {
    margin: 0 45%;

    .btnCancer {
      width: 120px;
      color: #f2f2f2;
      margin-bottom: 50px;
    }
  }
}
.content-detail{
  margin-left: 50px;
  p{
    color: #00BFBF;
    margin:3px 0
  }
}
.label-isBridgeDeviceNo {
  width: 120px;
}

.my-label{
  :deep(.el-form-item__label){
    line-height: 20px;
  }
}

.upload-comp {
  display: flex;
}
.red-star::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.company-cert {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  text-align: left;
  font-style: normal;
  text-transform: none;
}
:deep(.level-cascader){
  width: 587px;
}
.avatar-uploader {
  background: #f6f6f6;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
:deep(.avatar-uploader .el-upload) {
  width: 120px;
  height: 120px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.click-upload {
  margin-top: 10px;
  line-height: 20px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  font-style: normal;
  text-transform: none;
}
.red-star::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
:deep(.two-level-cascader) :deep(.el-cascader-menu:nth-child(2)) {
  display: none;
}
.clearance{
  margin-right:20px;
}
</style>
